<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
	<script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
	const root = ReactDOM.createRoot(document.querySelector("#root"));
	// 如果在使用组件时，在标签中插入内容，内容会在props.children属性中进行呈现。
	// 如果未插入内容，那么children的值是undefined (props下没有该属性)
	// 如果传递多个数据，那么得到的children是一个数组。
	const App = props =>{
		console.log(props);
		return (
			<div>
				<h3>App</h3>
				{props.children[0]}
			</div>
		)
	};
	root.render((
		<>
			<App>
				<div>1</div>
				<div>2</div>
				<div>3</div>
			</App>
		</>
	));
</script>
</html>